<template>

  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="id"
        label="水果Id"
        width="160">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="160">
    </el-table-column>
    <el-table-column
        prop="sale"
        label="销量"
        width="160">
    </el-table-column>
    <el-table-column
        prop="icon"
        label="图片"
        width="160">
      <template slot-scope="scope">
        <img :src="scope.row.icon" style="height: 70px"/>
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="fruitDelete(scope.row)" type="text" size="small">删除</el-button>
        <el-button @click="findFruit(scope.row)" type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    findFruit(object){
      this.$router.push('/edit?id='+object.id);
    },
    fruitDelete(object) {

      let _this = this;

      this.$confirm('是否确定要删除' + object.name + '?', '删除数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        axios.delete("http://localhost:8181/fruit/delete/" + object.id).then(function (responn) {
          if (responn.data) {
            _this.$alert(object.name + '删除成功！', '删除数据', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
              }
            });
          }
        })
      }).catch(()=>{
      });

    /*  axios.delete("http://localhost:8181/fruit/delete/" + row.id).then(function (response) {
        if (response.data){
          alert('删除成功！')
        }
        
      })*/
    }




  },
  created(){
    let _this=this
    axios.get("http://localhost:8181/fruit/list").then(function (response) {
      console.log(response)
      _this.tableData=response.data
    })
  },
  data() {
    return {
      tableData: null
    }
  }
}
</script>